<template>
    <div>
      <Card style="width:100%" class="has-btn-card" dis-hover>
        <p slot="title">
          <span>数学电子技术</span>

        </p>
        <div slot="extra">
          <span
            v-for="(item, idx) in menu"
            :key="idx"
            class="card-left-action"
            :class="index === idx? 'active': ''"
            @click="topath(item.path, idx)">
            {{item.name}}
          </span>
        </div>
        <router-view></router-view>
      </Card>
    </div>
</template>
<script>
  export default{
    created() {
      let path = this.$route.fullPath
      const index = this.menu.findIndex(pet => path === pet.path)
      this.index = index
    },
    data() {
      return {
        index: 0,
        menu: [{
          path: '/courseIndex',
          name: '首页'
        }, {
          path: '/course/statistics',
          name: '统计'
        }, {
          path: '/course/material',
          name: '资料'
        }, {
          path: '/course/task',
          name: '作业'
        }, {
          path: '/courseIndex',
          name: '设置'
        }]
      }
    },
    methods: {
      topath(path, index) {
        this.index = index
        this.$router.push({path})
      }
    }
  }
</script>
